<!DOCTYPE html>
<html>
  <head>
    <title>Scatter</title>
    <link rel="stylesheet" href="/static/css/scatter.css"> 
    <script src="/static/js/d3.min.js"></script>
  </head>
  <body>
    <svg width="1600" height="860" id="mainsvg" class="svgs"></svg>
    <script>
      const svg = d3.select('#mainsvg');
      const width = +svg.attr('width');
      const height = +svg.attr('height');
      const margin = {top: 60, right: 60, bottom: 60, left: 150};
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      const xValue = (datum) => {return datum.value};
      const yValue = (datum) => {return datum.name};

      const render = function(data){

        // Linear Scale: Data Space -> Screen Space; 
        const xScale = d3.scaleLinear()
        .domain([0, d3.max(data, xValue)])
        .range([0, innerWidth])
        .nice();

        // Introducing y-Scale; 
        const yScale = d3.scalePoint() // Instead of scaleBand, we use scale point; 
        .domain(data.map(yValue))
        .range([0, innerHeight])
        .padding(0.5);

        // The reason of using group is that nothing is rendered outside svg, so margin of svg is always blank while margin of group is rendered inside svg; 
        const g = svg.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

        // Do the data join (Enter)
        g.selectAll('circle')
        .data(data)
        .enter() 
        .append('circle') // For scatter plot, we change rectangles to circles; 
        .attr('cy', (datum) => { return yScale(yValue(datum))})
        .attr('cx', 0) // use xSacle to re-scale data space (domain) and return the rescaled population; 
        .attr('r', 0)
        .attr('fill', 'black')
        .transition().duration(3000)
        .attr('cx', (datum) => {return xScale(xValue(datum))}) // use xSacle to re-scale data space (domain) and return the rescaled population; 
        .attr('r', 10)
        .attr('fill', 'steelblue')

        // Adding axes; 
        const yAxis = d3.axisLeft(yScale)
        .tickSize(-innerWidth);
        const xAxis = d3.axisBottom(xScale)
        .tickFormat(d3.format('.3s'))
        .tickSize(-innerHeight);

        let yAxisGroup = g.append('g').call(yAxis);
        yAxisGroup.selectAll('.domain').remove(); // we can select multiple tags using comma to seperate them and we can use space to signify nesting; 
        
        let xAxisGroup = g.append('g').call(xAxis)
        .attr('transform', `translate(${0}, ${innerHeight})`);
        xAxisGroup.append('text')
        .attr('y', 50)
        .attr('x', innerWidth / 2)
        .attr('fill', 'black').text('Value')
        .attr('id', 'population');
        xAxisGroup.selectAll('.domain').remove();

        // Adding a title; 
        g.append('text')
        .text('Members in CSCG')
        .attr('y', -20)
        .attr('x', innerWidth / 2 - 100);
      }

      d3.csv('./static/data/vma.csv')
      .then(function(data){
          data.forEach( datum => {
            //datum.population = parseFloat(datum.population);
            datum.value = +(datum.value);
          } )
          console.log(data);
          console.log(data.map(yValue))
          render(data);
      });
    </script>
  </body>
</html>